<template>
  <div class="app">
   <div class="app-main">
     <router-view></router-view>
   </div>
    <div class="tabbar">
       <router-view name="tabbar"></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style lang="scss">
//css reset
html, body, div, span,
h1, h2, h3, h4, h5, h6, p,
a, address, em, img, ins, kbd, s,
strong,
b, u, i,
dl, dt, dd, ol, ul, li,
form, label,
table, tbody, tfoot, thead, tr, th, td,
article, canvas,
footer, header,
time,{
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
// HTML5 display-role reset for older browsers
article, footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

//public styles
html,
body {
  height:100%;
  overflow: hidden;
}
.app{
  height: 100%;
  display: flex;
  flex-direction: column;
  &-main {
    flex: 1;
    overflow-x: hidden;
  }
  &-header {
    height: 45px;
  }
}
</style>
